<template>
  <div class="page-containter">
    <uni-nav-bar fixed shadow :border="false" :title="title" left-icon="left" @clickLeft="onClickLeft"></uni-nav-bar>
    <div class="top-wrap">
      <div class="step-wrap flex-wrap flex-middle flex-center">
        <div
            v-for="(item, index) in activeList"
            :key="index"
            :class="['step-item', active >= index ? 'active' : '']"
            @click="changeActive(index)">
          <div class="step-icon-wrap flex-wrap flex-middle flex-center">
            <van-icon name="ellipsis" v-if="active === index"/>
            <van-icon name="success" v-else-if="active > index"/>
          </div>
          <div class="step-text">{{ item }}</div>
        </div>
      </div>
    </div>
    <div class="page-body">
      <swiper
          class="swiper-wrap"
          ref="swipe"
          :current="active"
          disable-touch
          :touchable="false"
          :show-indicators="false">
        <swiper-item>
          <div class="config-list">
            <div class="config-item"
                 v-for="(item, index) in detail.partitionDtoList"
                 :key="index">
              <div class="config-item-title">
                <i class="config-item-icon"></i>{{ item.name }}
              </div>
              <van-field
                  name="stepper"
                  label="题数"
                  size="large"
                  label-width="3em">
                <template #input>
                  <van-stepper
                      v-model="item.questionsNum"
                      integer
                      :min="0"
                      :max="item.totalQuestionsNum"
                      input-width="40px"
                      button-size="32px"/>
                  /{{ item.totalQuestionsNum }}题
                </template>
              </van-field>
              <van-field
                  name="stepper"
                  label="分值"
                  size="large"
                  label-width="3em">
                <template #input>
                  <van-stepper
                      v-model="item.everyScore"
                      integer
                      :min="0"
                      :max="10"
                      input-width="40px"
                      button-size="32px"/>
                  分
                </template>
              </van-field>
            </div>
          </div>
        </swiper-item>
        <swiper-item>
          <div class="config-list">
            <div class="config-item">
              <div class="config-item-title">
                <i class="config-item-icon"></i>考试时间
              </div>
              <van-field
                  name="stepper"
                  size="large"
                  label-width="2em">
                <template #input>
                  <van-stepper
                      v-model="detail.timeLimit"
                      integer
                      :min="0"
                      :max="120"
                      input-width="40px"
                      button-size="32px"/>
                  分钟
                </template>
              </van-field>
              <div class="config-item-title">
                <i class="config-item-icon"></i>设置及格分
              </div>
              <van-field
                  name="stepper"
                  size="large"
                  label-width="2em">
                <template #input>
                  <van-stepper
                      v-model="detail.passScore"
                      integer
                      :min="0"
                      :max="totalScore"
                      input-width="40px"
                      button-size="32px"/>
                  分
                </template>
              </van-field>
              <div class="config-item-title">
                <i class="config-item-icon"></i>是否打乱选项顺序
              </div>
              <CustomSelect v-model="isRandomOptions" :options="questionsList"></CustomSelect>
            </div>
          </div>
        </swiper-item>
      </swiper>
    </div>
    <div class="btn-wrap flex-wrap flex-middle">
      <div class="flex-item">
        <span class="fs-14 fc-333">共计： </span>
        <span class="fs-20 fw-b fc-333">{{ total }}</span>
        <span class="fs-14 fc-333"> 题 </span>
        <span class="fs-20 fw-b fc-333">{{ totalScore }}</span>
        <span class="fs-14 fc-333"> 分</span>
      </div>
      <button
          round
          class="btn"
          type="primary"
          @click="changeActive(1)"
          v-if="active === 0">下一步
      </button>
      <button
          round
          class="btn"
          type="primary"
          @click="changeActive(3)"
          v-else>开始考试
      </button>
    </div>
  </div>
</template>
<script setup>
import {onLoad, onLaunch, onShow} from '@dcloudio/uni-app'
import {ref, onMounted, watch, computed, getCurrentInstance} from 'vue';

const {$api, $uniPush, $toast, $dialog, $uniRedirectTo} = getCurrentInstance().proxy;
import {copyBasic, deepClone, stringify} from '@/assets/js/util.js';
import CustomSelect from '@/components/common/CustomSelect';
import VanField from "@/components/vant/van-field/van-field.vue";
import VanStepper from "@/components/vant/van-stepper/van-stepper.vue";
import VanIcon from "@/components/vant/van-icon/van-icon.vue";

const active = ref(0);
const activeList = ref(['试卷配置', '考试时间', '开始考试']);
const title = ref('模拟考试配置');
const saveLoading = ref(false);
const fullscreenLoading = ref(true);
const id = ref('');
const type = ref('');
const iscontinue = ref(1);
const detail = ref({});
const rules = ref({
  partitionDtoList: {
    questionsNum: [
      {required: true, type: 'number', message: '请输入题数', trigger: 'blur'}
    ],
    everyScore: [
      {required: true, type: 'number', message: '请输入分数', trigger: 'blur'}
    ]
  },
  autoSaveTime: [
    {required: true, type: 'number', message: '请选择保存记录时间间隔', trigger: 'blur'}
  ],
});
const total = ref(0);
const totalScore = ref(0);
const timeOptions = ref([
  {value: 2, label: '2分钟'},
  {value: 5, label: '5分钟'},
  {value: 10, label: '10分钟'}
]);
const isRandomOptions = ref(['2']);
const questionsList = ref([{name: '是', value: '1'}, {name: '否', value: '2'}]);
onLoad((query) => {
  id.value = query.id || '';
  type.value = query.type + '' || '';
  iscontinue.value = query.iscontinue || 1;
})
onMounted(() => {
  fullscreenLoading.value = true
  getInfo();
});

watch(() => isRandomOptions.value, (n) => {
  if (n && n.length) {
    detail.value.isRandomOptions = n[0];
  }
}, {deep: true});

watch(() => detail.value, (newDetail) => {
  let totalNew = 0, totalScoreNew = 0;
  if (newDetail.partitionDtoList && newDetail.partitionDtoList.length) {
    newDetail.partitionDtoList.forEach(e => {
      totalNew += (e.questionsNum || 0);
      totalScoreNew += (e.questionsNum || 0) * (e.everyScore || 0);
    });
    total.value = totalNew;
    totalScore.value = totalScoreNew;
  }
}, {deep: true});

const onClickLeft = () => {
  uni.navigateBack({delta: 1})
};
const changeActive = (i) => {
  if (i === 2) {
    return false
  } else if (i === 3) {
    submit()
    return
  }
  active.value = i
  // this.$refs.swipe.swipeTo(i)
}
const getInfo = () => {
  fullscreenLoading.value = true;
  $api.practice.configGet({practiceId: id.value}).then(res => {
    console.log(`=>(detail.vue:229) res`, res);
    res.timeLimit = res.timeLimit ? res.timeLimit / 60 : 60
    detail.value = res;
    isRandomOptions.value = res.isRandomOptions ? [res.isRandomOptions] : ['2'];
    fullscreenLoading.value = false;
  }).catch(e => {
    console.log(`=>(detail.vue:235) e`, e);
    fullscreenLoading.value = false;
    $toast.fail('获取信息失败' + (e.msg ? '：' + e.msg : ''))
  });
};

const remove = (index) => {
  detail.value.partitionDtoList[index].questionsNum = 0;
  detail.value.partitionDtoList[index].everyScore = 0;
};

const submit = () => {
  let basic = copyBasic(detail.value);
  basic.timeLimit = basic.timeLimit ? basic.timeLimit * 60 : 0;
  basic.totalScore = totalScore.value;
  basic.totalQuestionsNum = total.value;
  saveLoading.value = true;
  $api.practice.configSave(Object.assign({
    practiceId: id.value,
    partitionConfigJSON: stringify(detail.value.partitionDtoList)
  }, basic)).then(res => {
        saveLoading.value = false;
        $uniRedirectTo({
          name: 'practice-exam-id',
          params: {
            id: id.value,
            iscontinue: iscontinue.value
          },
          query: {
            type: type.value
          },
        }).catch(e => {
          saveLoading.value = false;
          $toast.fail(e.msg)
        });
      }
  )
}

</script>

<style lang="scss" scoped>
.page-containter {
  background: #F6F6F6;
  min-height: 100vh;

  .top-wrap {
    position: fixed;
    top: calc(var(--status-bar-height) + 50px);
    left: 0;
    width: 100%;
    z-index: 100;
    background: #fff;

    .van-nav-bar {
      box-shadow: inset 0px -1px 0px 0px rgba(221, 221, 221, 0.5);
    }

    .step-wrap {
      padding: 15px 0;
    }

    .step-item {
      position: relative;
      z-index: 1;
      padding: 0 8vw;

      &.active {
        .step-icon-wrap {
          background: var(--color);
        }

        .step-text {
          color: var(--color);
        }
      }

      &:not(:last-child) {
        &:after {
          content: '';
          position: absolute;
          top: 11px;
          left: calc(8vw + 16px);
          width: 100%;
          height: 2px;
          background: #EEEEEE;
          z-index: -1;
        }
      }

      .step-icon-wrap {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #EEEEEE;
        box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2);
        border: 2px solid #FFFFFF;
        line-height: 0;
        margin: 0 auto 10px;

        .van-icon {
          color: #fff;
          font-size: 13px !important;
          margin-top: 2px;
        }
      }

      .step-text {
        font-size: 12px;
        color: #333;
        line-height: 17px;
      }
    }
  }

  .page-body {
    padding: 125px 0 50px;

    .swiper-wrap {
      height: 320px;
    }

    .config-list {
      padding: 15px;

      .config-item {
        padding: 20px;
        background: #fff;
        border-radius: 6px;

        & + .config-item {
          margin-top: 10px;
        }

        .config-item-title {
          height: 22px;
          font-size: 16px;
          font-weight: 600;
          color: #333333;
          line-height: 22px;

          .config-item-icon {
            display: inline-block;
            margin-right: 8px;
            width: 3px;
            height: 14px;
            background: var(--color);
            vertical-align: middle;
          }
        }

        .van-cell {
          padding: 10px 0;

          &:after {
            display: none;
          }

          :deep(.van-cell__title) {
            font-size: 14px;
            line-height: 32PX;
          }

          :deep(.van-stepper) {
            margin-right: 12px;
          }
        }
      }
    }
  }

  .btn-wrap {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 54px;
    padding: 0 20px;
    background: #fff;
    border-top: 1px solid #EEEEEE;

    .btn {
      width: 110px;
      height: 40px;
      border-radius: 20px;
    }
  }

  .custom-checkbox {
    margin-top: 10px;
  }
}
</style>